<template>
  <li @mouseenter="bgChange1" @mouseleave="bgChange2">
    <label>
      <input type="checkbox" v-model="check" />
      <span>{{ finish.title }}</span>
    </label>
    <span v-show="timeShow">{{ setTime }}</span>
    <button class="btn btn-danger" v-show="isShow" @click="removeItem">删除</button>
  </li>
</template>

<script>
export default {
   name: 'finish-2',
  data () {
    return {
      isShow: false,
      timeShow: true
    }
  },
  methods: {
    bgChange1 (e) {
      e.target.style.backgroundColor = '#ddd'
      this.isShow = true
      this.timeShow = false
    },
    bgChange2 (e) {
      e.target.style.backgroundColor = ''
      this.isShow = false
      this.timeShow = true
    },
    removeItem () {
      this.removeTodo(this.finish.id)
    }
  },
  props: {
    finish: Object,
    // index: Number,
    isDone: Function,
    removeTodo: Function
  },
  computed: {
    check: {
      get () {
        return this.finish.done
      },
      set (val) {
        this.isDone(val, this.finish.id)
      }
    },
    setTime () {
      return this.finish.date
    }
  }
}
</script>

<style lang="less" scoped>
  li{
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
    label{
      float: left;
      cursor: pointer;
      li input{
        vertical-align: middle;
        margin-right: 6px;
        position: relative;
        top: -1px;
      }
    }

    button{
      float: right;
      margin-top: 3px;
    }

    >span{
      display: block;
      float: right;
    }

    &:before{
      content: initial;
    }
    &:last-child{
      border-bottom: none;
    }
  }
  </style>
